<!-- Copyright 2018 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.html">

<link rel="import" href="../../components/oobe_cr_lottie.html">
<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_text_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/display_manager_types.html">

<dom-module id="fingerprint-setup-element">
  <template>
    <style include="oobe-dialog-host-styles">
      #sensorLocationContainer {
        height: 242px;
        width: 352px;
      }

      #sensorLocation {
        background-image:
            url(chrome://oobe/fingerprint_scanner_illustration.svg);
        background-size: 352px 242px;
        height: 100%;
        width: 100%;
      }
    </style>
    <oobe-adaptive-dialog id="setupFingerprint" role="dialog" for-step="start"
        footer-shrinkable
        aria-label$="[[i18nDynamic(locale, 'setupFingerprintScreenAriaLabel')]]">
      <h1 slot="title" hidden="[[isChildAccount_]]">
        [[i18nDynamic(locale, 'setupFingerprintScreenTitle')]]
      </h1>
      <h1 slot="title" hidden="[[!isChildAccount_]]">
        [[i18nDynamic(locale, 'setupFingerprintScreenTitleForChild')]]
      </h1>
      <p slot="subtitle" hidden="[[isChildAccount_]]">
        [[i18nDynamic(locale, 'setupFingerprintScreenDescription')]]
      </p>
      <p slot="subtitle" hidden="[[!isChildAccount_]]">
        [[i18nDynamic(locale, 'setupFingerprintScreenDescriptionForChild')]]
      </p>
      <iron-icon slot="icon" icon="oobe-32:fingerprint"></iron-icon>
      <div slot="content" class="flex layout vertical center center-justified">
        <div id="sensorLocationContainer" class="oobe-illustration">
          <template is="dom-if" if="[[shouldUseLottieAnimation_]]">
            <oobe-cr-lottie id="scannerLocationLottie"
                animation-url="fingerprint_scanner_animation.json">
            </oobe-cr-lottie>
          </template>
          <template is="dom-if" if="[[!shouldUseLottieAnimation_]]">
            <div id="sensorLocation"></div>
          </template>
        </div>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="skipStart"
            text-key="skipFingerprintSetup"
            on-click="onSkipOnStart_" class="focus-on-show">
        </oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-adaptive-dialog id="startFingerprintEnroll" role="dialog"
        for-step="progress" footer-shrinkable
        aria-label$="[[i18nDynamic(locale, 'enrollmentProgressScreenTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:fingerprint"></iron-icon>
      <h1 slot="title" hidden="[[complete_]]">
        [[i18nDynamic(locale, 'enrollmentProgressScreenTitle')]]
      </h1>
      <h1 slot="title" hidden="[[!complete_]]">
        [[i18nDynamic(locale, 'setupFingerprintEnrollmentSuccessTitle')]]
      </h1>
      <div slot="subtitle" hidden="[[!complete_]]">
        <div hidden="[[isChildAccount_]]">
          [[i18nDynamic(locale,
              'setupFingerprintEnrollmentSuccessDescription')]]
        </div>
        <div hidden="[[!isChildAccount_]]">
          [[i18nDynamic(locale,
              'setupFingerprintEnrollmentSuccessDescriptionForChild')]]
        </div>
      </div>
      <div slot="subtitle" hidden="[[!isProblemImmobile_(scanResult_)]]">
        <div hidden="[[isChildAccount_]]">
          [[i18nDynamic(locale, 'setupFingerprintScanMoveFinger')]]
        </div>
        <div hidden="[[!isChildAccount_]]">
          [[i18nDynamic(locale, 'setupFingerprintScanMoveFingerForChild')]]
        </div>
      </div>
      <div slot="subtitle" hidden="[[!isProblemOther_(scanResult_)]]">
        [[i18nDynamic(locale, 'setupFingerprintScanTryAgain')]]
      </div>
      <div slot="content" class="flex layout vertical center center-justified">
        <cr-fingerprint-progress-arc id="arc">
        </cr-fingerprint-progress-arc>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="skipProgress"
            on-click="onSkipInProgress_" class="focus-on-show"
            text-key="skipFingerprintSetup"
            hidden="[[complete_]]">
        </oobe-text-button>
        <oobe-text-button id="addAnotherFinger"
            text-key="fingerprintSetupAddAnother"
            hidden="[[!isAnotherButtonVisible_(percentComplete_,
                canAddFinger)]]"
            on-click="onAddAnother_">
        </oobe-text-button>
        <oobe-text-button id="done"
            hidden="[[!complete_]]"
            text-key="fingerprintSetupDone"
            on-click="onDone_" class="focus-on-show" inverse>
        </oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
  </template>
  <script src="fingerprint_setup.js"></script>
</dom-module>
